<template>
  <!-- <题目预览组件> -->
  <div>
    <!-- 单选 -->
    <div v-if="tpType === '1'">
      <!-- 单选 -->
      <div>
        <el-row>
          <el-col
            :span="6"
          >【题型】:<span>{{ filterType(questionsList.questionType) }}</span></el-col>
          <el-col :span="6">【编号】:<span>{{ questionsList.id }}</span></el-col>
          <el-col :span="6">【难度】:<span>{{ filterDifficulty(questionsList.difficulty) }}</span></el-col>
          <el-col :span="6">【标签】:<span>{{ questionsList.tags }}</span></el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col
            :span="6"
          >【学科】:<span>{{ questionsList.subjectId }}</span></el-col>
          <el-col
            :span="6"
          >【目录】:<span>{{ questionsList.catalogId }}</span></el-col>
          <el-col
            :span="6"
          >【方向】:<span>{{ questionsList.direction }}</span></el-col>
        </el-row>
        <hr
          style="filter: alpha(opacity=100, finishopacity=0, style=2)"
          width="100%"
          color="#ebebeb"
          SIZE="10"
        >
        <el-row>
          <el-col :span="24">【题干】:</el-col>
        </el-row>
        <!-- 单选 -->
        <div>
          <!-- 题目 -->
          <el-row class="marginTop">
            <el-col
              :span="24"
            ><span style="color: #3b3bff" v-html="questionsList.question" /></el-col>
          </el-row>
          <!-- 选项 -->
          <el-row>
            <el-col
              :span="24"
            >单选题 选项：（以下选中的选项为正确答案）</el-col>
          </el-row>
          <!-- 单选按钮 -->
          <div>
            <el-row
              v-for="obj in questionsList.options"
              :key="obj.id"
              class="marginTop"
            >
              <el-radio
                v-model="radio"
                :label="filterRadio(obj.isRight)"
              >{{ obj.title }}</el-radio>
            </el-row>
          </div>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#f6f6f6"
            SIZE="10"
          >
          <!-- 参考答案 -->
          <el-row>
            【参考答案】：<el-button
              type="danger"
              @click="isVideo = true"
            >视频答案预览</el-button>
          </el-row>
          <!-- 视频组件 -->
          <el-row v-if="isVideo">
            <video-player :video-u-r-l="questionsList.videoURL" />
          </el-row>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#dfdfdf"
            SIZE="10"
          >
          <!-- 答案解析 -->
          <el-row class="marginTop">
            【答案解析】：<span v-html="questionsList.answerID" />
          </el-row>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#dddddd"
            SIZE="10"
          >
          <el-row class="marginTop">
            【题目备注】：<span>{{ questionsList.remarks }}</span>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 多选 -->
    <div v-else-if="tpType === '2'">
      <!-- <题目预览组件> -->
      <div>

        <el-row>
          <el-col
            :span="6"
          >【题型】:<span>{{ filterType(questionsList.questionType) }}</span></el-col>
          <el-col :span="6">【编号】:<span>{{ questionsList.id }}</span></el-col>
          <el-col :span="6">【难度】:<span>{{ filterDifficulty(questionsList.difficulty) }}</span></el-col>
          <el-col :span="6">【标签】:<span>{{ questionsList.tags }}</span></el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col
            :span="6"
          >【学科】:<span>{{ questionsList.subjectId }}</span></el-col>
          <el-col
            :span="6"
          >【目录】:<span>{{ questionsList.catalogId }}</span></el-col>
          <el-col
            :span="6"
          >【方向】:<span>{{ questionsList.direction }}</span></el-col>
        </el-row>
        <hr
          style="filter: alpha(opacity=100, finishopacity=0, style=2)"
          width="100%"
          color="#ebebeb"
          SIZE="10"
        >
        <el-row>
          <el-col :span="24">【题干】:</el-col>
        </el-row>

        <!-- 多选 -->
        <div>
          <!-- 题目 -->
          <el-row class="marginTop">
            <el-col :span="24">
              <span style="color: #3b3bff" v-html="questionsList.question" />
            </el-col>
          </el-row>
          <!-- 选项 -->
          <el-row>
            <el-col
              :span="24"
            >多选题 选项：（以下选中的选项为正确答案）</el-col>
          </el-row>
          <!-- 多选按钮 -->
          <div>
            <el-checkbox-group :value="checkList">
              <el-row
                v-for="obj in questionsList.options"
                :key="obj.id"
                class="marginTop"
              >
                <el-checkbox :label="obj.isRight">{{
                  obj.title
                }}</el-checkbox>
              </el-row></el-checkbox-group>
          </div>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#f6f6f6"
            SIZE="10"
          >
          <!-- 参考答案 -->
          <el-row>
            【参考答案】：<el-button
              type="danger"
              @click="isVideo = true"
            >视频答案预览</el-button>
          </el-row>
          <!-- 视频组件 -->
          <el-row v-if="isVideo"> <video-player :video-u-r-l="questionsList.videoURL" /> </el-row>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#dfdfdf"
            SIZE="10"
          >
          <!-- 答案解析 -->
          <el-row class="marginTop">
            【答案解析】：<span v-html="questionsList.answerID" />
          </el-row>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#dddddd"
            SIZE="10"
          >
          <el-row class="marginTop">
            【题目备注】：<span>{{ questionsList.remarks }}</span>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 简答 -->
    <div v-else-if="tpType === '3'">
      <!-- 简答 -->
      <div>
        <el-row>
          <el-col
            :span="6"
          >【题型】:<span>{{ filterType(questionsList.questionType) }}</span></el-col>
          <el-col :span="6">【编号】:<span>{{ questionsList.id }}</span></el-col>
          <el-col :span="6">【难度】:<span>{{ filterDifficulty(questionsList.difficulty) }}</span></el-col>
          <el-col :span="6">【标签】:<span>{{ questionsList.tags }}</span></el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col
            :span="6"
          >【学科】:<span>{{ questionsList.subjectId }}</span></el-col>
          <el-col
            :span="6"
          >【目录】:<span>{{ questionsList.catalogId }}</span></el-col>
          <el-col
            :span="6"
          >【方向】:<span>{{ questionsList.direction }}</span></el-col>
        </el-row>
        <hr
          style="filter: alpha(opacity=100, finishopacity=0, style=2)"
          width="100%"
          color="#ebebeb"
          SIZE="10"
        >
        <el-row>
          <el-col :span="24">【题干】:</el-col>
        </el-row>

        <!-- 简答 -->
        <div>
          <!-- 题目 -->
          <el-row class="marginTop">
            <el-col :span="24">
              <span style="color: #3b3bff" v-html="questionsList.question" />
            </el-col>
          </el-row>

          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#f6f6f6"
            SIZE="10"
          >
          <!-- 参考答案 -->
          <el-row>
            【参考答案】：<el-button
              type="danger"
              @click="isVideo = true"
            >视频答案预览</el-button>
          </el-row>
          <!-- 视频组件 -->
          <el-row v-if="isVideo">
            <video-player :video-u-r-l="questionsList.videoURL" />
          </el-row>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#dfdfdf"
            SIZE="10"
          >
          <!-- 答案解析 -->
          <el-row class="marginTop">
            【答案解析】：<span v-html="questionsList.answerID" />
          </el-row>
          <hr
            style="filter: alpha(opacity=100, finishopacity=0, style=2)"
            width="100%"
            color="#dddddd"
            SIZE="10"
          >
          <el-row class="marginTop">
            【题目备注】：<span>{{ questionsList.remarks }}</span>
          </el-row>
        </div>
      </div>
    </div>
    <div class="buttonCenter">
      <el-button type="primary" @click="close">关闭</el-button>
    </div>
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue'
import { detail } from '../../../api/hmmm/questions'
import { questionType, difficulty } from '../../../api/hmmm/constants'
export default {
  name: 'TopicPreview',
  components: { VideoPlayer },
  props: {
    // 题型类型
    tpType: {
      type: [String, Number],
      required: true
    },
    tpId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      radio: 1, // 单选按钮
      checkList: [1], // 多选按钮
      isVideo: false, // 视频组件显示
      questionsList: {
        // questionType: '题型',
        // id: '编号',
        // difficulty: '难度',
        // tags: '标签',
        // subjectId: '学科',
        // catalogId: '目录',
        // direction: '方向',
        // question: '题干',
        // options: [
        //   {
        //     id: '1',
        //     isRight: 0,
        //     questionsID: 20,
        //     title: '错误'
        //   },
        //   {
        //     id: '2',
        //     isRight: 1,
        //     questionsID: 21,
        //     title: '正确'
        //   },
        //   {
        //     id: '3',
        //     isRight: 0,
        //     questionsID: 22,
        //     title: '错误'
        //   },
        //   {
        //     id: '4',
        //     isRight: 0,
        //     questionsID: 23,
        //     title: '错误'
        //   }
        // ],
        // videoURL: 'www.baidu.com',
        // answerID: '答案解析',
        // remarks: '题目备注'
      } // 题组数据
    }
  },
  created() {
    this.detail()
  },
  methods: {
    // 关闭按钮
    close() {
      this.$emit('close')
      this.isVideo = false
    },
    // 题库详情
    async detail() {
      const res = await detail(this.tpId)
      this.questionsList = res.data
      console.log(res)
    },
    // 筛选单选按钮
    filterRadio(isRight) {
      if (isRight === this.radio) {
        return 1
      } else {
        return 0
      }
    },
    // 筛选题型
    filterType(type) {
      const obj = questionType.find((item) => item.value === Number(type))
      return obj ? obj.label : '未知'
    },
    // 筛选难度
    filterDifficulty(type) {
      const obj = difficulty.find((item) => item.value === Number(type))
      return obj ? obj.label : '未知'
    }
  }
}
</script>

<style scoped lang="scss">
.marginTop {
  margin: 10px 0;
}
.buttonCenter {
  margin-top: 30px;
  text-align: center;
}

</style>
